<template>
    <div class="qilin-booksList">
        <el-card>
            <el-form :model="formSearch" inline ref="formSearch">
                <el-form-item label="图书名称" prop="booksName">
                    <el-input type="text" placeholder="请输入" v-model="formSearch.booksName"></el-input>
                </el-form-item>
                <el-form-item label="图书类型" prop="booksType">
                    <el-select placeholder="请选择" v-model="formSearch.booksType">
                        <el-option label="文学" value="文学"></el-option>
                        <el-option label="科学" value="科学"></el-option>
                        <el-option label="动物" value="动物"></el-option>
                        <el-option label="食物" value="食物"></el-option>
                        <el-option label="诗歌" value="诗歌"></el-option>
                        <el-option label="小说" value="小说"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="qilin-form-search-btn">
                    <el-button type="primary" @click="search()">查询</el-button>
                    <el-button type="default" @click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card style="margin-top:15px;">
            <el-table :data="tableData" border>
                <el-table-column label="序号" align="center" width="60">
                    <template v-slot:default="scope">
                        <span>
                            {{ scope.$index + 1 }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="图书名称" prop="booksName" align="center"></el-table-column>
                <el-table-column label="图书类型" prop="booksType" align="center"></el-table-column>
                <el-table-column label="加入时间" prop="createTime" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="180">
                    <el-button type="primary" link @click="$router.push('/index/books/detail')">查看</el-button>
                    <el-button type="primary" link>编辑</el-button>
                    <el-button type="primary" link @click="deleteData()">删除</el-button>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return {
            formSearch:{ //查询表单配置项
                booksName:"",
                booksType:""
            },
            tableData:[ //表格数据
                {
                    booksName:"老人与海",
                    booksType:"文学",
                    createTime:"2023-12-12"
                },
                {
                    booksName:"那一世",
                    booksType:"文学",
                    createTime:"2023-12-12"
                },
                {
                    booksName:"森林之王",
                    booksType:"动物",
                    createTime:"2023-12-12"
                },
                {
                    booksName:"完美世界",
                    booksType:"小说",
                    createTime:"2023-12-08"
                },
                {
                    booksName:"食物大全",
                    booksType:"食物",
                    createTime:"2023-12-02"
                },
                {
                    booksName:"光片机的由来",
                    booksType:"科学",
                    createTime:"2023-12-02"
                }
            ]
        }
    },
    methods:{
        // 点击查询按钮事件监听
        search(){
            this.tableData=this.tableData.filter((item)=>{
                if(this.formSearch.booksName && !this.formSearch.booksType){
                    return item.booksName.includes(this.formSearch.booksName);
                }else if(this.formSearch.booksType && !this.formSearch.booksName){
                    return item.booksType === this.formSearch.booksType;
                }else if(this.formSearch.booksName && this.formSearch.booksType){
                    return item.booksName.includes(this.formSearch.booksName) && item.booksType === this.formSearch.booksType;
                };
            });
        },
        // 点击重置按钮事件监听
        reset(){
            this.$refs["formSearch"].resetFields();
            this.tableData=[ //表格数据
                {
                    booksName:"老人与海",
                    booksType:"文学",
                    createTime:"2023-12-12"
                },
                {
                    booksName:"那一世",
                    booksType:"文学",
                    createTime:"2023-12-12"
                },
                {
                    booksName:"森林之王",
                    booksType:"动物",
                    createTime:"2023-12-12"
                },
                {
                    booksName:"完美世界",
                    booksType:"小说",
                    createTime:"2023-12-08"
                },
                {
                    booksName:"食物大全",
                    booksType:"食物",
                    createTime:"2023-12-02"
                },
                {
                    booksName:"光片机的由来",
                    booksType:"科学",
                    createTime:"2023-12-02"
                }
            ];
        },
        // 点击编辑按钮事件监听
        deleteData(){
            ElMessageBox.confirm("是否确认删除该数据？","提示",{
                confirmButtonText:"确认",
                cancelButtonText:"取消",
                type:"error",
                icon:"WarningFilled"
            }).then(()=>{
                ElMessage({
                    message:"删除成功",
                    type:"success"
                });
            }).catch(()=>{
                console.log("取消删除");
            });
        }
    },
    mounted(){
        
    }
}
</script>

<style lang="scss" scoped>
.el-form{
    position:relative;
    >.qilin-form-search-btn{
        position:absolute;
        top:0;
        right:0;
    }
}
</style>
